@charset "utf-8";
@import "../chameleon/oniui-theme";
@mixin transition($duration) {
	-webkit-transition: $duration;
	-moz-transition: $duration;
	-ms-transition: $duration;
	-o-transition: $duration;
	transition: $duration;
}
$uiname : "oni-carousel";
@if($oinui-theme == smoothness) {
	$carousel: (
			bg: #fff,
			borderColor:#aaaaaa
	) !global
}

.#{$uiname} {
	// current style
	// means #{$uiname}-bar
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	@include user-select();
	.#{$uiname}-panel {
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;

		.#{$uiname}-item {
			position: relative;
			height: 100%;
			@include inline-block();
			overflow: hidden;
			text-align: center;
			background-color: #f2f2f2;

			.oni-img-origin{
				position: absolute;
				top: 50%;
				left: 50%;
				width: 100%;
				height: 100%;
				@include transform(translate(-50%, -50%));
				position: static\0;
				transform: translate(0, 0)\0;
				*top: 0;
				*left: 0;
			}

			.oni-img-placeholder{
				position: absolute;
				top: 50%;
				left: 50%;
				@include transform(translate(-50%, -50%));
			}

			.#{$uiname}-link{
				display: block;
				position: absolute;
				width: 1px; //ie click hack
				height: 1px; //ie click hack
				top: 0;
				left: 0;
				z-index: 10;
				background-image:url(about:blank);
			}
		}
	}
	.#{$uiname}-selection-wrap{
		position: absolute;
		z-index: 20;
		bottom: 4%;
		left: 50%;
		a{
			@include inline-block();
			width: 10px;
			height: 10px;
			margin: 0 5px;
			background-color: rgb(255,255,255);
			@include opacity(0.6);
			border-radius: 50%;
			cursor: pointer;
		}
		.selected{
			background-color: #00a3c2;
		}

	}
	.arrow{
		position: absolute;
		z-index: 20;
		top:50%;
		width: 30px;
		height: 30px;
		margin: -15px 0 0 -15px;
		cursor: pointer;
	}
	.prev{
		left: 7%;
		background: url(http://source.qunarzz.com/general/oniui/carousel/arrows-left-icon.png) no-repeat;
		_background:none;
		_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://source.qunarzz.com/general/oniui/carousel/arrows-left-icon.png',sizingMethod='crop');
	}
	.prev:hover{
		background: url(http://source.qunarzz.com/general/oniui/carousel/arrows-left-hover-icon.png) no-repeat;
		_background:none;
		_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://source.qunarzz.com/general/oniui/carousel/arrows-left-hover-icon.png',sizingMethod='crop');
	}
	.after{
		left: 93%;
		background: url(http://source.qunarzz.com/general/oniui/carousel/arrows-right-icon.png) no-repeat;
		_background:none;
		_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://source.qunarzz.com/general/oniui/carousel/arrows-right-icon.png',sizingMethod='crop');
	}
	.after:hover{
		background: url(http://source.qunarzz.com/general/oniui/carousel/arrows-right-hover-icon.png) no-repeat;
		_background:none;
		_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://source.qunarzz.com/general/oniui/carousel/arrows-right-hover-icon.png',sizingMethod='crop');
	}
}
